<template>
    <div class="app-container">
        <el-form :show-message="!($route.query.isInfo || isInfo)" ref="elForm" :disabled="$route.query.isInfo || isInfo"
            :model="formData" :rules="rules" size="medium" label-width="150px">
            <h2 style="text-align: center">年终总结</h2>
            <h4 class="form-header h4">基本信息</h4>
            <el-row :gutter="15">
                <el-col :span="8">
                    <el-form-item label="填写日期" prop="recordTime">
                        <el-date-picker v-model="formData.recordTime" value-format="yyyy-MM-dd HH:mm:ss"
                            :style="{ width: '100%' }" placeholder="请选择填写日期" clearable></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="填表人" prop="userName">
                        <!-- <UserDialog :disabled="$route.query.isInfo || isInfo" v-model="formData.userId"
                            @change="changeUser">
                        </UserDialog> -->
                        <el-input disabled v-model="formData.userName" placeholder="请输入填表人" clearable
                            :style="{ width: '100%' }"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="年度" prop="year">
                        <el-date-picker format="yyyy" value-format="yyyy" v-model="formData.year" type="year"
                            placeholder="选择年">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="总结内容" prop="content">
                        <editor v-model="formData.content" placeholder="请输入总结内容" :min-height="700" />
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-if="btnShow">
                    <el-form-item label-width="0" style="text-align: center; margin-top: 30px">
                        <el-button v-if="!($route.query.isInfo || isInfo)" type="primary" @click="submitForm">提交</el-button>
                        <el-button :disabled="false" @click="resetForm">返回</el-button>
                    </el-form-item>
                </el-col>
            </el-row>


        </el-form>
    </div>
</template>
  
<script>
import { deptTreeSelect } from "@/api/system/user";

import {
    summaryMaterialAdd,
    summaryMaterialEdit,
    summaryMaterialInfo,
} from "@/api/quality/materials.js";
import { selectList as selectListplan } from "@/api/quality/manageAudit/plan.js";
export default {
    components: {},
    props: {
        isInfo: {
            type: Boolean,
            default: false,
        },
        id: {
            type: String,
            default: "",
        },
        btnShow: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {
            planList: [],
            formData: {
                content: ''
            },
            deptOptions: [],
            rules: {
                recordTime: [
                    {
                        required: true,
                        message: "请选择填写日期",
                        trigger: "change",
                    },
                ],
                userId: [
                    {
                        required: true,
                        message: "请选择填表人",
                        trigger: "change",
                    },
                ],
                content: [
                    {
                        required: true,
                        message: "请输入内容",
                        trigger: "change",
                    },
                ],
            },
        };
    },
    computed: {},
    watch: {},
    created() {
        if (this.$route.query.isEdit || this.$route.query.isInfo || this.isInfo) {
            this.getinfo();
        }
        this.getDeptTree();
        this.getPlan();
    },
    mounted() {
        this.formData.userId = this.$store.state.user.id
        this.formData.userName = this.$store.state.user.nickName
    },
    methods: {
        /** 查询部门下拉树结构 */
        getDeptTree() {
            deptTreeSelect().then((response) => {
                this.deptOptions = response.data;
            });
        },
        getPlan() {
            selectListplan().then((response) => {
                this.planList = response.data;
            });
        },
        // changeUser(e) {
        //     console.log(e);
        //     this.formData.userName = e.nickName;
        // },
        changeDept(e) {
            console.log(e);
            // this.formData.userId = "";
            let arr = this.$refs.reference.getCheckedNodes()
            let list = []
            let label = []
            arr.forEach((item, index) => {
                list.push(item.value)
                label.push(item.label)
                console.log(item.value);
            })
            console.log(list);
            this.deptIdStringValue = list.toString()
            this.deptIdStringLabel = label.toString()
        },
        getinfo() {
            console.log(this.$route.query.id);
            summaryMaterialInfo(this.$route.query.id || this.id).then((response) => {
                this.formData = response.data;
                this.formData.deptId = this.formData.deptId.split(',')
                // 将ID转number类型
                this.formData.deptId = this.formData.deptId.map(i => parseInt(i))
                console.log(this.formData.deptId);
                // 多选部门回显取后端返回的ID
                this.formData.deptId.map(i => {
                    list.push(this.findParentLot(i))
                })
                this.formData.deptId = list
                this.formData.checkUserId = this.formData.checkUserId.split(',')
                this.formData.checkUserId = this.formData.checkUserId.map((e) => parseInt(e));
            });
        },
        // 创建新数组 返回
        findParentLot(id) {
            const arr = []
            this.deployIdFun(this.deptOptions, id, arr)
            return arr.reverse()
        },
        // 逻辑代码 for循环 判断相同的id 取上级ID
        deployIdFun(options, id, newArr) {
            console.log(options);
            options.forEach((v) => {
                if (v.id === id) {
                    newArr.push(id)
                    console.log(newArr, 'newArr');
                    // parentId 上级id （注意其他场景上级id 是否是'parentId'
                    if (!v.parentId || v.parentId !== '0') {
                        this.deployIdFun(this.deptOptions, v.parentId, newArr)
                    }
                } else {
                    if (v.children && v.children.length) {
                        this.deployIdFun(v.children, id, newArr)
                    }
                }
            })
        },
        submitForm() {
            this.$refs["elForm"].validate((valid) => {
                if (valid) {
                    let query = JSON.parse(JSON.stringify(this.formData));
                    // query.deptId = this.$refs.reference.getCheckedNodes()[0].value;
                    // 多选
                    query.deptId = this.deptIdStringValue
                    query.deptName = this.deptIdStringLabel
                    query.type = 1
                    // query.deptName = this.$refs.reference.getCheckedNodes()[0].label;
                    if (this.formData.summaryMaterialId != undefined) {
                        summaryMaterialEdit(query).then((response) => {
                            this.$modal.msgSuccess("修改成功");
                            this.resetForm();
                        });
                    } else {
                        summaryMaterialAdd(query).then((response) => {
                            this.$modal.msgSuccess("新增成功");
                            this.resetForm();
                        });
                    }
                }
            });
        },
        resetForm() {
            this.$tab.closeOpenPage();
        },
    },
};
</script>
  